<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>餐厅点餐系统 - 功能演示版</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
        .container { max-width: 400px; margin: 0 auto; background: white; min-height: 100vh; }
        
        /* 头部样式 */
        .header { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: white; padding: 20px; text-align: center; }
        .logo { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
        .slogan { font-size: 14px; opacity: 0.9; }
        
        /* 导航菜单 */
        .nav-tabs { display: flex; background: #fff; border-bottom: 1px solid #eee; }
        .nav-tab { flex: 1; text-align: center; padding: 15px; cursor: pointer; transition: all 0.3s; }
        .nav-tab.active { color: #ee5a24; border-bottom: 3px solid #ee5a24; }
        .nav-tab:hover { background: #f8f8f8; }
        
        /* 内容区域 */
        .content { padding: 20px; }
        
        /* 菜单项样式 */
        .menu-category { margin-bottom: 30px; }
        .category-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; color: #333; padding-left: 10px; border-left: 4px solid #ee5a24; }
        .dish-item { display: flex; align-items: center; padding: 15px; margin-bottom: 15px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; }
        .dish-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
        .dish-image { width: 60px; height: 60px; border-radius: 8px; background: linear-gradient(45deg, #ff6b6b, #ee5a24); margin-right: 15px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; }
        .dish-info { flex: 1; }
        .dish-name { font-size: 16px; font-weight: bold; margin-bottom: 5px; color: #333; }
        .dish-desc { font-size: 14px; color: #666; margin-bottom: 8px; }
        .dish-price { color: #ee5a24; font-weight: bold; font-size: 16px; }
        .add-btn { background: #ee5a24; color: white; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: background 0.3s; }
        .add-btn:hover { background: #ff6b6b; }
        
        /* 购物车样式 */
        .cart-item { display: flex; align-items: center; padding: 15px; margin-bottom: 15px; background: #f8f8f8; border-radius: 12px; }
        .cart-quantity { display: flex; align-items: center; margin: 0 15px; }
        .quantity-btn { width: 30px; height: 30px; border: 1px solid #ddd; background: white; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .quantity-num { margin: 0 10px; font-weight: bold; }
        .cart-total { padding: 20px; background: #fff; border-top: 1px solid #eee; position: sticky; bottom: 0; }
        .total-price { font-size: 18px; font-weight: bold; color: #ee5a24; text-align: center; margin-bottom: 15px; }
        .checkout-btn { background: #ee5a24; color: white; border: none; padding: 15px; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; width: 100%; transition: background 0.3s; }
        .checkout-btn:hover { background: #ff6b6b; }
        
        /* 订单样式 */
        .order-item { background: #f8f8f8; padding: 15px; margin-bottom: 15px; border-radius: 12px; }
        .order-status { display: inline-block; padding: 4px 12px; border-radius: 15px; font-size: 12px; margin-left: 10px; }
        .status-pending { background: #ffeaa7; color: #e17055; }
        .status-completed { background: #a3e4d7; color: #16a085; }
        
        .footer { text-align: center; padding: 20px; color: #666; font-size: 12px; }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 头部 -->
        <div class="header">
            <div class="logo">🍔 美味餐厅</div>
            <div class="slogan">享受美食，品味生活</div>
        </div>

        <!-- 导航标签 -->
        <div class="nav-tabs">
            <div class="nav-tab" :class="{active: activeTab === 'menu'}" @click="activeTab = 'menu'">📋 菜单</div>
            <div class="nav-tab" :class="{active: activeTab === 'cart'}" @click="activeTab = 'cart'">🛒 购物车 ({{cartTotal}})</div>
            <div class="nav-tab" :class="{active: activeTab === 'orders'}" @click="activeTab = 'orders'">📦 订单</div>
        </div>

        <!-- 菜单页面 -->
        <div class="content" v-if="activeTab === 'menu'">
            <div class="menu-category" v-for="category in menu" :key="category.id">
                <h3 class="category-title">{{category.name}}</h3>
                <div class="dish-item" v-for="dish in category.dishes" :key="dish.id">
                    <div class="dish-image">{{dish.emoji}}</div>
                    <div class="dish-info">
                        <div class="dish-name">{{dish.name}}</div>
                        <div class="dish-desc">{{dish.description}}</div>
                        <div class="dish-price">¥{{dish.price}}</div>
                    </div>
                    <button class="add-btn" @click="addToCart(dish)">+ 添加</button>
                </div>
            </div>
        </div>

        <!-- 购物车页面 -->
        <div class="content" v-if="activeTab === 'cart'">
            <div v-if="cartItems.length === 0" style="text-align: center; padding: 50px 0; color: #666;">
                🛒 购物车为空
            </div>
            <div v-else>
                <div class="cart-item" v-for="item in cartItems" :key="item.id">
                    <div class="dish-image">{{item.emoji}}</div>
                    <div class="dish-info">
                        <div class="dish-name">{{item.name}}</div>
                        <div class="dish-price">¥{{item.price}}</div>
                    </div>
                    <div class="cart-quantity">
                        <button class="quantity-btn" @click="updateQuantity(item, -1)">-</button>
                        <span class="quantity-num">{{item.quantity}}</span>
                        <button class="quantity-btn" @click="updateQuantity(item, 1)">+</button>
                    </div>
                </div>
                
                <div class="cart-total">
                    <div class="total-price">总计: ¥{{totalPrice}}</div>
                    <button class="checkout-btn" @click="checkout">💰 立即结算</button>
                </div>
            </div>
        </div>

        <!-- 订单页面 -->
        <div class="content" v-if="activeTab === 'orders'">
            <div v-if="orders.length === 0" style="text-align: center; padding: 50px 0; color: #666;">
                📦 暂无订单
            </div>
            <div class="order-item" v-for="order in orders" :key="order.id">
                <div><strong>订单 #{{order.id}}</strong></div>
                <div>时间: {{order.time}}</div>
                <div>金额: ¥{{order.total}}</div>
                <div>状态: 
                    <span class="order-status" :class="'status-' + order.status">
                        {{order.status === 'pending' ? '准备中' : '已完成'}}
                    </span>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>完整版需在HBuilderX中运行</p>
            <p>© 2024 美味餐厅点餐系统</p>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                activeTab: 'menu',
                menu: [
                    {
                        id: 1,
                        name: '🍔 汉堡套餐',
                        dishes: [
                            { id: 101, name: '招牌汉堡套餐', description: '新鲜牛肉+薯条+可乐', price: 38, emoji: '🍔' },
                            { id: 102, name: '鸡肉汉堡套餐', description: '香脆鸡排+薯条+雪碧', price: 32, emoji: '🍗' },
                            { id: 103, name: '双层芝士汉堡', description: '双层牛肉+双倍芝士', price: 45, emoji: '🧀' }
                        ]
                    },
                    {
                        id: 2,
                        name: '🍝 主食',
                        dishes: [
                            { id: 201, name: '意大利面', description: '经典肉酱意面', price: 28, emoji: '🍝' },
                            { id: 202, name: '披萨', description: '玛格丽特披萨', price: 48, emoji: '🍕' },
                            { id: 203, name: '炒饭', description: '扬州炒饭', price: 22, emoji: '🍚' }
                        ]
                    },
                    {
                        id: 3,
                        name: '🥤 饮品',
                        dishes: [
                            { id: 301, name: '可乐', description: '冰镇可口可乐', price: 8, emoji: '🥤' },
                            { id: 302, name: '橙汁', description: '鲜榨橙汁', price: 12, emoji: '🍊' },
                            { id: 303, name: '咖啡', description: '美式咖啡', price: 15, emoji: '☕' }
                        ]
                    }
                ],
                cartItems: [],
                orders: []
            },
            computed: {
                cartTotal() {
                    return this.cartItems.reduce((total, item) => total + item.quantity, 0);
                },
                totalPrice() {
                    return this.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
                }
            },
            methods: {
                addToCart(dish) {
                    const existingItem = this.cartItems.find(item => item.id === dish.id);
                    if (existingItem) {
                        existingItem.quantity++;
                    } else {
                        this.cartItems.push({...dish, quantity: 1});
                    }
                    uni.showToast({ title: '已添加到购物车', icon: 'success' });
                },
                updateQuantity(item, change) {
                    item.quantity += change;
                    if (item.quantity <= 0) {
                        this.cartItems = this.cartItems.filter(i => i.id !== item.id);
                    }
                },
                checkout() {
                    if (this.cartItems.length === 0) return;
                    
                    const newOrder = {
                        id: Date.now(),
                        time: new Date().toLocaleString(),
                        total: this.totalPrice,
                        status: 'pending',
                        items: [...this.cartItems]
                    };
                    
                    this.orders.unshift(newOrder);
                    this.cartItems = [];
                    this.activeTab = 'orders';
                    
                    alert('🎉 订单提交成功！订单号: #' + newOrder.id);
                }
            },
            mounted() {
                // 模拟uni-app的showToast方法
                window.uni = {
                    showToast: function(options) {
                        alert(options.title);
                    }
                };
            }
        });
    </script>
</body>
</html>